<template>
	<div class="relativeVideoFrame">
		<div>
			<vueVideoPlayerCom :src="video.video" />
			<div class="videoTopDiv" @click="toVideoDetail(video.id)">
				<div class="videoName">{{video.title}}</div>
				<!-- <div class="videoTitle" v-html="video.content"></div> -->
				<div class="videoTitle">
					{{ video.content.replace(/<[^<>]+>/g, "") }}
				</div>
				<div class="pvDiv">
					<img src="@/assets/image/videoFrame/playIcon.png" style="margin-right: 5px"></img>
					<div v-if="video.pv > 10000"> {{ (video.pv / 10000).toFixed(2) + '万' }} </div>
					<div v-else>{{ video.pv }}</div>				
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// 引用视频插件
	import vueVideoPlayerCom from '@/components/vueVideoPlayerCom';
	export default {
		name: "relativeVideoFrame",
		props: ['video'],
		components: { vueVideoPlayerCom },
		data() {
			return {
			}
		},
		methods: {
			// 跳转在线课程详情页
			toVideoDetail(id){
				this.$emit('refresh', id);
                // this.$router.push({ path: 'onlineCourseDetail', query: { id } });
            },
		}
	}
</script>

<style scoped>
	.relativeVideoFrame {
		border-bottom: 1px solid #eeeeee;
		padding: 15px 0;
	}

	.relativeVideoFrame .videoBox{
		width: 100%;
		text-align: center;
		border-radius: 4px;
		overflow: hidden;
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		margin-right: 4px;
	}
	.relativeVideoFrame .videoBox:hover{
		cursor: pointer;
	}

	.relativeVideoFrame .videoTopDiv {
		text-align: left;
		margin-top: 5px;
	}

	.relativeVideoFrame .videoTopDiv:hover{
		cursor: pointer;
	}
	
	.relativeVideoFrame .videoTopDiv .videoName {
		font-size: 14px;
		font-weight: bold;
		margin-top: 13px;
	}

	.relativeVideoFrame .videoTopDiv .pvDiv {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 12px;
	}

	.relativeVideoFrame .videoTitle {
		text-align: left;
		font-size: 12px;
		color: #999999;
		margin: 5px 0 10px 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
</style>
